<template>
    <div class="index">
        <transition :name="Version.switchTransition">
            <router-view></router-view>
        </transition>
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item :name="boots.path" :badge="Book.fictionshelf.newFictionNum" v-if="Book.fictionshelf.newFictionNum > 0" :to="boots.path">
                <span>书架</span>
                <template #icon="props">
                    <img src="../../assets/img/boots-a.png" v-if="props.active"/>
                    <img src="../../assets/img/boots.png" v-else/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item v-else :name="boots.path" :to="boots.path">
                <span>书架</span>
                <template #icon="props">
                    <img src="../../assets/img/boots-a.png" v-if="props.active"/>
                    <img src="../../assets/img/boots.png" v-else/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item  :name="item.path" :to="item.path" :icon="item.icon" v-for="(item,index) in list" :key="index">
                {{item.text}}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { Tabbar, TabbarItem } from 'vant'
export default {
    components : {
        [Tabbar.name]: Tabbar,
		[TabbarItem.name]: TabbarItem,
    },
    name : 'index',
    data() {
        return {
            active : this.$route.path,
            home : [],
            boots : {
                path : '/bookshelf',
            },
            list : [
                {
                    icon : 'diamond-o',
                    path : '/home',
                    text : '精选'
                },
                // {
                //     icon : 'comment-o',
                //     path : '/comment',
                //     text : '圈子'
                // },
                {
                    icon : 'user-o',
                    path : '/user',
                    text : '我的'
                },
            ]
        }
    },
    created(){
    },
    computed : {
        ...mapState(['Book', 'Version'])
    },
    methods:{
        ...mapMutations(['getFictionShelfList']),
    }
}
</script>

<style scoped>
    .index{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .router-view{
        width: 100%;
        height: calc(100% - 50px);
    }
</style>